import React, { useEffect, useState } from 'react';
import { Box, Flex, Image, Text } from '@chakra-ui/react';
import goRight from '@/assets/img/go.png';
import { useRouter } from 'next/router';
import { queryNoticeList } from '@/services/product';
import { useDispatch } from 'react-redux';
import { useAccount } from 'wagmi';

const Notice = () => {
  const router = useRouter();
  const [noticeList, setNoticeList] = useState([] as NoticeList[]);
  const dispatch = useDispatch()
  const { address, isConnected } = useAccount();


  // 获取公告列表
  useEffect(() => {
    queryNoticeList({ address }).then((res: ApiRes) => {
      setNoticeList(res.data as NoticeList[])
    })
  }, [])

  //更新地址
  useEffect(() => {
    if (address) {
      dispatch({ type: 'ADDRESS', payload: address })
    }
  }, [address])

  return (
    <Box w={'100%'}>
      <Box p={'40px 20px'} w={'100%'} boxSizing="border-box">
        {noticeList &&
          noticeList.map((item) => (
            <Flex
              key={item.id}
              justify={'space-between'}
              m={'15px 0'}
              align="center"
              onClick={() => {
                router.push({ pathname: '/notice/detail', query: { id: item.id } });
              }}
            >
              <Box>
                <Text m={0} fontSize={15} lineHeight={'23px'}>
                  {item.title}
                </Text>
                <Text m={0} fontSize={10} lineHeight={'15px'} color="#8C8C8C">
                  {new Date(item.publishTime).toLocaleString()}
                </Text>
              </Box>
              <Image src={goRight.src} w={8} h={13} alt={"go_right"} />
            </Flex>
          ))}
      </Box>
    </Box>

  );
};

export default Notice;
